<h2>Why is this an issue?</h2>
<p>Leaving unused props in a React component can make the code harder to understand and maintain. Other developers may wonder why certain props are
passed to a component if they are not used. Unused props can also increase the size of the component’s memory footprint and impact performance. This
is especially true if the unused props are large objects or arrays. Furthermore, if a prop is unused, it may indicate that the developer did not
complete the implementation as he intended initially or made a mistake while writing the component.</p>
<p>To avoid these issues, you should remove any unused props from React components. This helps keep the codebase clean, improves performance, and
enhances code readability.</p>
<h3>Known Issues/Limitations</h3>
<p>False Positives SFC Stateless Function Components (SFCs) accept props as an argument and return a JSX expression. Even if the function gets called
from a component, the props that are only used inside the component are not be considered used by a component. See references for more details.</p>
<h2>How to fix it in PropTypes</h2>
<h3>Code examples</h3>
<h4>Noncompliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
import PropTypes from 'prop-types';
import React from 'react';

class Hello extends React.Component {
  render() {
    return (
      &lt;h1&gt;Hello&lt;/h1&gt;
    );
  }
}

Hello.propTypes = {
  name: PropTypes.string
};
</pre>
<h4>Compliant solution</h4>
<pre data-diff-id="1" data-diff-type="compliant">
import PropTypes from 'prop-types';
import React from 'react';

class Hello extends React.Component {
  render() {
    return (
      &lt;h1&gt;Hello {this.props.name}&lt;/h1&gt;
    );
  }
}

Hello.propTypes = {
  name: PropTypes.string
};
</pre>
<h2>How to fix it in TypeScript</h2>
<h3>Code examples</h3>
<h4>Noncompliant code example</h4>
<pre data-diff-id="2" data-diff-type="noncompliant">
import React from 'react';

type Props = {
  name: string;
}

class Hello extends React.Component&lt;Props&gt; {
  render() {
    return &lt;div&gt;Hello&lt;/div&gt;;
  }
}
</pre>
<h4>Compliant solution</h4>
<pre data-diff-id="2" data-diff-type="compliant">
import React from 'react';

type Props = {
  name: string;
};

class Hello extends React.Component&lt;Props&gt; {
  render() {
    return &lt;div&gt;Hello {this.props.name}&lt;/div&gt;;
  }
}
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/jsx-eslint/eslint-plugin-react">eslint-plugin-react</a> - Rule <a
  href="https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/no-unused-prop-types.md">no-unused-prop-types</a> </li>
  <li> React Documentation - <a href="https://react.dev/learn/passing-props-to-a-component">Passing Props to a Component</a> </li>
  <li> React Documentation - <a href="https://react.dev/reference/react/Component#static-proptypes">static propTypes</a> </li>
  <li> React Documentation - <a href="https://react.dev/learn/typescript#typescript-with-react-components">TypeScript with React Components</a> </li>
  <li> ESLint React Plugin Known Limitations - <a
  href="https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md#known-issueslimitations">https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md#known-issueslimitations</a> </li>
</ul>
